<template>
    <view>
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true" class="swiper">
            <block v-for="(item, index) in images" :key="index">
                <swiper-item>
                    <image :src="item.url" class="slide-image" mode="aspectFill"></image>
                </swiper-item>
            </block>
        </swiper>
        <view class="gg">
            <image src="/static/pages/img/喇叭.png" class="gg_tp"></image>
            <view>{{ gg }}</view>
        </view>

        <view class="ge1"></view>

        <view class="ydxz">
            <!-- 自助预定 验券预定 -->
            <navigator class="ydxz_zz" url="/packageB/baoxiang/baoxiang">
                <!-- 自助 -->
                <view>自助预订</view>
            </navigator>

            <view class="ydxz_yq">
                <view>验券预订</view>
            </view>
        </view>

        <view class="xzq">
            <view @tap="yi" :class="currentIndex == 0 ? 'xzq_6' : 'xzq_5'">
                <view>今天</view>
                <view>04-17</view>
            </view>

            <view @tap="er" :class="currentIndex == 1 ? 'xzq_6' : 'xzq_5'">
                <view>周四</view>
                <view>04-18</view>
            </view>

            <view @tap="san" :class="currentIndex == 2 ? 'xzq_6' : 'xzq_5'">
                <view>周五</view>
                <view>04-19</view>
            </view>

            <view @tap="si" :class="currentIndex == 3 ? 'xzq_6' : 'xzq_5'">
                <view>周六</view>
                <view>04-20</view>
            </view>

            <view @tap="wu" :class="currentIndex == 4 ? 'xzq_6' : 'xzq_5'">
                <view>周日</view>
                <view>04-21</view>
            </view>
            <picker mode="date" start="1950-1-1" end="2050-1-1" :value="date" fields="day" @change="bindDateChange" class="xzq_rl">
                <image class="xzq_rq" src="/static/pages/img/日历.png"></image>
                <image class="xzq_sjx" src="/static/pages/img/三角形.png"></image>
            </picker>
        </view>

        <view class="ge1"></view>

        <view class="ydsj">
            <view class="ydsj_k">
                <image class="ydsj_sz" src="/static/pages/img/时钟.png"></image>
                <text class="ydsj_text">预定开始时间:</text>

                <text class="ydsj_text2">18:05</text>
                <image class="ydsj_bi" src="/static/pages/img/笔.png"></image>
            </view>
        </view>

        <view class="ge2"></view>

        <view class="ztxq">
            <view class="ztxq_h1">桌台详情</view>
            <text class="ztxq_text">{{ ztxq }}</text>
        </view>
    </view>
</template>

<script>
// pages/yanquanyuding/yanquanyuding.js
export default {
    data() {
        return {
            ztxq: '二楼木地板，请勿乱丢烟头！沙发可移动变床 有任何问题联系客服',

            images: [
                {
                    url: '/static/pages/img/bx1.png'
                },
                {
                    url: '/static/pages/img/bx2.png'
                }
            ],

            gg: '营业时间：24小时营业，120分钟起订',
            currentIndex: 0,
            date: ''
        };
    },
    onShow() {
        this.yi();
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        yi() {
            this.setData({
                currentIndex: 0
            });
        },

        er() {
            this.setData({
                currentIndex: 1
            });
        },

        san() {
            this.setData({
                currentIndex: 2
            });
        },

        si() {
            this.setData({
                currentIndex: 3
            });
        },

        wu() {
            this.setData({
                currentIndex: 4
            });
        },

        bindDateChange() {
            console.log('占位：函数 bindDateChange 未声明');
        }
    }
};
</script>
<style>
.scroll-view {
    height: 100vh; /* 设定滚动视图的高度，这里使用视口高度 */
}

.swiper {
    width: 100%;
    height: 410rpx; /* 设置轮播图的高度，根据需要调整 */
}

.slide-image {
    width: 100%; /* 图片宽度100%填充容器 */
    height: 100%; /* 图片高度100%填充容器 */
}
.gg {
    height: 60rpx;
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    font-size: 24rpx; /* 将字体大小设为14px */
    font-family: '宋体', 'SimSun', sans-serif;
    color: rgb(43, 43, 43);
}
.gg_tp {
    margin: 40rpx;
    width: 25rpx;
    height: 25rpx;
}

.ydxz {
    height: 80rpx;
    margin: 20rpx 30rpx 20rpx 30rpx;
    padding: 10rpx 10rpx 10rpx 10rpx;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间平均分布在容器中 */
    background-color: rgb(236, 235, 235);
    align-items: center; /* 垂直居中 */
    border-radius: 8rpx; /* 圆角设置为20px */
}
.ydxz_yq {
    background-color: rgb(245, 215, 170);
    color: rgb(167, 106, 56);
    height: 80rpx;
    width: 50%;
    border-radius: 6rpx; /* 圆角设置为20px */
    font-weight: bold; /* 设置字体加粗 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 36rpx; /* 将字体大小设为14px */
}

.ydxz_zz {
    border-radius: 6rpx; /* 圆角设置为20px */
    height: 80rpx;
    width: 50%;
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 36rpx; /* 将字体大小设为14px */
}

.ydsj {
    margin: 40rpx 40rpx 70rpx 40rpx;
}

.ydsj_k {
    height: 100rpx;
    border: 3rpx solid rgb(123, 199, 142);
    border-radius: 15rpx; /* 设置边框圆角 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: left; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-size: 34rpx; /* 将字体大小设为14px */
}
.ydsj_sz {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
    margin-right: 10rpx;
}
.ydsj_text {
    margin-bottom: 10rpx;
    margin-right: 250rpx;
    color: rgb(95, 93, 93);
}
.ydsj_text2 {
    color: rgb(123, 199, 142);
    margin-bottom: 10rpx;
}
.ydsj_bi {
    margin-left: 5rpx;
    width: 35rpx;
    height: 35rpx;
    margin-bottom: 10rpx;
}

.ztxq {
    padding: 0rpx 20rpx 300rpx 20rpx;
    margin: 20rpx 5rpx 0rpx 20rpx;
    font-size: 19px; /* 将字体大小设为14px */
    color: rgb(53, 53, 53);
}
.ztxq_h1 {
    font-weight: bold; /* 设置字体加粗 */
    margin-bottom: 20rpx;
}
.ztxq_text {
    font-size: 14px; /* 将字体大小设为14px */
}
</style>
